<style lang="less">
.hmOrder {
    .ivu-modal {
        width: 70% !important;
    }

    .ivu-modal-body {
        height: 70%;
        overflow-y: auto;
    }
}
</style>
<template>
    <Modal v-model="show" :title="editTitle" class="hmOrder" :mask-closable="false">
        <Form ref="hmOrderForm" :model="hmOrderForm" :label-width="100" style="margin-top: 20px;">
            <FormItem label="订单状态">
                <Steps :current="statusList.findIndex(item => item.value === hmOrderForm.status)" style="margin-top: 4px;">
                    <Step v-for="(item,index) in statusList" :key="index" :title="item.name"></Step>
                </Steps>
            </FormItem>
            <Row>
                <Col span="8">
                    <FormItem label="客户姓名">
                        {{ hmOrderForm.userAddr.receiver }}
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="客户电话">
                        {{ hmOrderForm.userAddr.mobile }}
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="客户地址">
                        {{ hmOrderForm.userAddr.addr }}
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <FormItem label="技师姓名">
                        {{ hmOrderForm.technician.name }}
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="技师电话">
                        {{ hmOrderForm.technician.mobile }}
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="订单总金额">
                        <span style="font-size: 18px;font-weight: bold;color: red;">￥{{ hmOrderForm.orderPrice }} 元</span>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <FormItem label="技术评分">
                        <Rate disabled show-text allow-half v-model="hmOrderForm.comm.technicalScore">
                            <span style="color: #f5a623">{{ hmOrderForm.comm.technicalScore }}</span>
                        </Rate>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="服务评分">
                        <Rate disabled show-text allow-half v-model="hmOrderForm.comm.serviceScore">
                            <span style="color: #47cb89">{{ hmOrderForm.comm.serviceScore }}</span>
                        </Rate>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="评论内容">
                        <Input readonly type="textarea" v-model=" hmOrderForm.comm.content" :rows="3" :autosize="{maxRows: 5,minRows: 3}"></Input>
                    </FormItem>
                </Col>
            </Row>
            <FormItem label="服务项目">
                <div style="margin: 20px 0;">
                    <Table :loading="loading" border :columns="columns" sortable="custom" :data="data" ref="table"></Table>
                </div>
            </FormItem>


            <Row>
                <Col :span="8">
                    <FormItem label="订单记录">
                        <Timeline style="margin-top: 10px;">
                            <TimelineItem v-if="hmOrderForm.createTime">
                                <p class="time">{{ hmOrderForm.createTime }}</p>
                                <p class="content">创建订单</p>
                            </TimelineItem>
                            <TimelineItem v-if="hmOrderForm.payTime">
                                <p class="time">{{ hmOrderForm.payTime }}</p>
                                <p class="content">支付时间</p>
                            </TimelineItem>
                            <TimelineItem v-if="hmOrderForm.dvyTime">
                                <p class="time">{{ hmOrderForm.dvyTime }}</p>
                                <p class="content">技师接单时间</p>
                            </TimelineItem>
                            <TimelineItem v-if="hmOrderForm.arrivalTime">
                                <p class="time">{{ hmOrderForm.arrivalTime }}</p>
                                <p class="content">技师达到时间</p>
                            </TimelineItem>
                            <TimelineItem v-if="hmOrderForm.startTime">
                                <p class="time">{{ hmOrderForm.startTime }}</p>
                                <p class="content">服务开始时间</p>
                            </TimelineItem>
                            <TimelineItem v-if="hmOrderForm.endTime">
                                <p class="time">{{ hmOrderForm.endTime }}</p>
                                <p class="content">服务结束时间</p>
                            </TimelineItem>
                        </Timeline>
                    </FormItem>
                </Col>
                <Col :span="16">
                    <FormItem label="接单照片">
                        <div v-for="(item, index) in imgList" :key="index" style="display: flex; align-items: center;margin-bottom: 10px;">
                            {{ item.name }}
                            <img v-for="(ite, indx) in item.value" :src="ite.imgPath" v-viewer="{movable: false}" style="height: 100px;width: 200px;margin-left: 20px;">
                        </div>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="text" @click="show=false">取消</Button>
        </div>
    </Modal>
</template>
<script>
import {getHmOrder} from '@/api/hmzd/hmOrder'
import util from "@/libs/util";

export default {
    name: "updateHmOrder",
    props: {
        value: {
            type: Boolean,
            default: false
        },
        HmOrderId: {
            type: String
        },
        modalTitle: {
            type: String
        }
    },
    data() {
        return {
            imgList: [],
            show: this.value,
            editTitle: this.modalTitle,
            loading: true,
            disabled: false,
            hmOrderForm: {
                comm: {
                    technicalScore: 0,
                    serviceScore: 0
                },
                userAddr: {},
                technician: {}

            },
            statusList: [
                {
                    name: '未支付',
                    value: 0
                },
                {
                    name: '已支付',
                    value: 1
                },
                {
                    name: '技师接单',
                    value: 2
                },
                {
                    name: '技师途中',
                    value: 3
                },
                {
                    name: '技师到达',
                    value: 4
                },
                {
                    name: '开始服务',
                    value: 5
                },
                {
                    name: '结束服务',
                    value: 6
                },
                {
                    name: '已评论',
                    value: 7
                },
                {
                    name: '订单失效',
                    value: -1
                },
            ],
            columns: [
                {
                    title: '图片地址',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'cover',
                    sortable: false,
                    render: (h, params) => {
                        return h('div', [
                            h('img', {
                                attrs: {
                                    src: util.nginxUrl + params.row.cover
                                },
                                style: {
                                    width: '60px',
                                    height: '40px'
                                }
                            }),
                        ]);
                    },
                },
                {
                    title: '项目名称',
                    align: 'center',
                    minWidth: 180,
                    ellipsis: true,
                    tooltip: true,
                    key: 'title',
                    sortable: false
                },
                {
                    title: '项目金额',
                    align: 'center',
                    minWidth: 180,
                    ellipsis: true,
                    tooltip: true,
                    key: 'price',
                    sortable: false
                }, {
                    title: '项目时长（分钟）',
                    align: 'center',
                    minWidth: 180,
                    ellipsis: true,
                    tooltip: true,
                    key: 'timeLong',
                    sortable: false
                }
            ],
            data: []
        }
    },
    methods: {
        closeModal(val) {
            this.$emit('input', val);
        },
        initForm() {
            this.hmOrderForm = {
                comm: {
                    technicalScore: 0,
                    serviceScore: 0
                },
                userAddr: {},
                technician: {},
            };
        },
        groupByMethod(list, fn) {
            const groups = {};
            list.forEach(function (o) {
                const group = JSON.stringify(fn(o));
                groups[group] = groups[group] || [];
                groups[group].push(o);
            });
            return groups;
        }
    },
    watch: {
        value(val) {
            this.show = val;
        },
        show(val) {
            this.initForm();
            this.loading = false;
            this.editTitle = this.modalTitle;
            if (this.editTitle == "查看") {
                this.disabled = true;
            } else {
                this.disabled = false;
            }
            if (val) {
                if (this.HmOrderId != null && this.HmOrderId.trim().length > 0) {
                    getHmOrder({id: this.HmOrderId}).then(res => {
                        if (res.success) {
                            this.hmOrderForm = res.data;
                            this.data = res.data.projectList;
                            if (!this.hmOrderForm.comm) {
                                this.hmOrderForm.comm = {}
                            }
                            this.hmOrderForm.comm.technicalScore = this.hmOrderForm.comm.technicalScore ? this.hmOrderForm.comm.technicalScore : 0
                            this.hmOrderForm.comm.serviceScore = this.hmOrderForm.comm.serviceScore ? this.hmOrderForm.comm.serviceScore : 0

                            if (this.hmOrderForm.hmOrderImgList) {
                                for (let i = 0; i < this.hmOrderForm.hmOrderImgList.length; i++) {
                                    this.hmOrderForm.hmOrderImgList[i].imgPath = util.nginxUrl + this.hmOrderForm.hmOrderImgList[i].imgPath
                                }
                                let arr = this.groupByMethod(this.hmOrderForm.hmOrderImgList, (item) => item.type);
                                let dataArr = [];
                                for (const arrKey in arr) {
                                    dataArr.push({
                                        name: arrKey.replaceAll('"', ""),
                                        value: arr[arrKey]
                                    })
                                }
                                this.imgList = dataArr
                            }
                        } else {
                            this.$Message.error(res.msg);
                        }
                    });
                }
            } else {
                this.closeModal(val);
            }
        }
    }
}
</script>
